<template>
	<view class="im-item-box">
		<!-- 时间开始 -->
		<view class="im-time" v-if="itemWechat.datetime">
			{{itemWechat.datetime}}
		</view>
		<!-- 时间结束 -->
		<view :class="itemWechat.self_side ? 'im-item im-right' : 'im-item im-left'">
			<view class="photo">
				<image :src="itemWechat.avatar"></image>
			</view>
			<view class="weixin-box">
				<view class="weixin-top">
					<view class="weixin-img">
						<image src="@/im/static/img/switch-weixin.png"></image>
					</view>
					<view class="weixin-text">
						<view v-if="itemWechat.message.status != 1 ">我想和您交换微信号， 您是否同意</view>
						<view v-else class="switch-weixin-success">
							<view class="success-txt1">{{itemWechat.message.contact}}的微信号</view>
							<view class="success-txt2">{{itemWechat.message.wechat}}</view>
						</view>
					</view>
				</view>
				<view class="weixin-bottom">
					<view v-if="itemWechat.message.status == 0" class="btn-weixin-default">
						<view class="btn refuse" @click="handleRefuse">拒绝</view>
						<view class="btn agree" @click="handleAgree">同意</view>
					</view>
					<view v-if="itemWechat.message.status == 1" @click="handleCopyWechat(itemWechat.message.wechat)" class="btn-weixin-success">
						复制微信号
					</view>
					<view v-if="itemWechat.message.status == 2" class="btn-weixin-error">
						已拒绝
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		parseTime,
		formatTime
	} from '@/utils/index.js'
	export default {
		props: ['itemWechat'],
		filters: {
			timeFilter(timestamp) {
				return formatTime(timestamp, '{y}-{m}-{d}', true)
			},
			interviewTimeFilter(timestamp) {
				return parseTime(timestamp, '{y}-{m}-{d} {h}:{i}')
			}
		},
		methods: {
			/**
			 * 拒绝交换微信号
			 */
			handleRefuse() {
				this.$emit('handleExchangeWechatRefuse', this.itemWechat)
			},
			/**
			 * 同意交换微信号
			 */
			handleAgree() {
				this.$emit('handleExchangeWechatAgree', this.itemWechat)
			},
			/**
			 * 复制微信号
			 */
			handleCopyWechat(wechat) {
				uni.setClipboardData({
					data: wechat, //要被复制的内容
					success: () => { //复制成功的回调函数
						uni.showToast({ //提示
							title: '复制成功',
							icon: 'success'
						})
					},
					fail: () => {
						uni.showToast({ //提示
							title: '复制失败',
							icon: 'error'
						})
					}
				});
			}
		}
	}
</script>
<style lang="scss" scoped>
	// 交换手机号微信号开始
	.weixin-box {
		width: 480rpx;
		height: 240rpx;
		overflow: hidden;
		background: #FFFFFF;
		border-radius: 30rpx;

		.weixin-top {
			display: flex;
			padding: 42rpx 50rpx 40rpx 50rpx;
			align-items: center;
			.weixin-img {
				width: 68rpx;
				height: 68rpx;
				margin-right: 30rpx;
				flex-shrink: 0;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.weixin-text {
				flex: 3;
				color: #666666;
				font-size: 28rpx;

				.switch-weixin-success {
					.success-txt2 {
						color: #1CB56E;
						word-break: break-all;
						word-wrap: break-word;
					}
				}
			}
		}

		.weixin-bottom {

			.btn-weixin-default {
				display: flex;
				justify-content: center;

				.btn {
					width: 120rpx;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					border-radius: 10rpx;

					&.agree {
						background: #5792FF;
						border: 2rpx solid #5792FF;
						color: #fff;
						margin-left: 52rpx;
					}

					&.refuse {
						background: #FFFFFF;
						border: 2rpx solid #94BAFF;
						color: #5792FF;
					}
				}
			}

			.btn-weixin-success {
				text-align: center;
				line-height: 84rpx;
				color: #2FBD6E;
				font-size: 28rpx;
				border-top: 2rpx solid #ededed;
			}

			.btn-weixin-error {
				border-top: 2rpx solid #ededed;
				text-align: center;
				height: 84rpx;
				line-height: 84rpx;
				color: #999999;
				font-size: 28rpx;
			}
		}
	}

	// 交换手机号微信号结束
</style>
